<template>
  <!--<transition name="el-fade-in-linear">-->
  <div class="main-bg">
      <el-row>
        <el-col style="margin-bottom:5px;width:65%;">
            <!--<el-button class="el-icon-plus" type="primary" @click="addClick()" size="mini">-->
              <!--添加菜单-->
            <!--</el-button>-->
        </el-col>
        <el-col style="width:35%;margin-bottom:5px">
          <h3  style="margin-bottom:10px;margin-left:10px;color:#1f2f3d;font-weight:400"> 快捷添加</h3>
        </el-col>
      </el-row>
    <v-newMenus  @quickAddClick="quickAddClick" style="width:35%;float:right"></v-newMenus>
    <el-table
      size="small"
      :max-height="slide_h"
      :row-class-name="tableRowClassName"
      border
      style="width:65%;"
      :empty-text="(data.data!=null&&data.data.length==0)?'空空如也':'数据初始化中...'"
      :data="data.data">
      <el-table-column width="50" prop="id" label="ID" />
      <el-table-column width="220" prop="name" label="菜单名称" />
      <el-table-column  prop="desc" label="菜单描述" />
      <el-table-column  prop="type" label="菜单类型" >
        <template slot-scope="scope">
          <el-tag :type="scope.row.type===1?'primary':'danger'">{{scope.row.type===1?'根菜单':'子菜单'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="140" fixed="right" label="菜单操作">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="修改菜单" placement="top">
            <el-button class="el-icon-edit" type="primary" @click="editRow(scope.row)" size="mini">
            </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除菜单" placement="top">
          <el-button class="el-icon-delete" type="danger" @click="delRow(scope.row)" size="mini">
          </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="first">
      <v-page v-if="pageinfo.pages!=null" :pageinfo='pageinfo' @changepageinfo="changepaginfo"/>
    </div>
     <v-dialog v-if="dialogshow == 1" :isadd="isadd" @reload="reload()"  :dialogshow="dialogshow == 1" :dialoginfo="dialoginfo" @changedialogshow="changedialogshow"></v-dialog>
  </div>
  <!--</transition>-->
</template>
<script>
  const pagination = () =>
    import ("@/components/pagination/pagetemplate");
  const newMenus = () => import("@/components/modules/sysManagement/menu/view_list_newMenus");
  const dialog = () =>
    import ("@/components/modules/sysManagement/menu/view_dialog_menu");
  export default {
    inject:["reload"],
    components: {
      "v-page": pagination,
      "v-dialog": dialog,
      "v-newMenus" :newMenus
    },
    data() {
      return {
        isadd:false,
        dialoginfo: {},
        dialogshow: 0,
        isajax: false,
        loadingTxt:"",
        data: "",
        slide_h: (window.document.body.offsetHeight - 204),
        pageinfo:this.$store.getters.getPageInfo(this.$route.path,null),
      }
    },
    methods: {
      init(){
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.findAllSysMenus,lock:1,text:this.loadingTxt});
        this.proAPI.getJson(this.proAPI.URLS.findAllSysMenus,this.proUtil.generateParams(this.pageinfo.params)).then((res) => {
            this.data = res;
            this.pageinfo.pages = res.pages;
            this.pageinfo.total = res.total;
        })
      },
      editRow(row) {
        // console.log(row);
        this.isadd = false;
        this.dialoginfo = {
          "id":row.id,
          "name":row.name,
          "desc":row.desc,
          "parent":row.parent,
          "path":row.path,
          "group":row.group,
          "sort":row.sort,
          "open":row.open,
          "type":row.type
        };
        this.dialogshow = 1;
      },
      delRow(row){
        this.$confirm('你确定删除【'+row.name+'】菜单吗?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          callback: action => {
            // console.log(action);
            if(action=="confirm"){
              this.isajax=true;
              this.proAPI.postJson(this.proAPI.URLS.delSysMenu,{"menuId":row.id}).then((res)=>{
                if(res!=null){
                  this.$message.success({
                    "message":res.message
                  })
                  this.reload();
                }else{
                }
                this.isajax=false;
              })
            }
          }
        });
      },
      addClick(){
        this.isadd = true;
        this.dialoginfo = {"name":"","desc":"","open":false,"path":"","type":1,"parent":0};
        this.dialogshow = 1;
      },
      changepaginfo() {
        this.init({page:this.pageinfo.page,rows:this.pageinfo.rows});
      },
      changedialogshow() {
        this.dialogshow = 0;
        // console.log(this.dialogshow);
      },
      reload(){
        this.dialogshow = 0;
        this.init();
      },
      tableRowClassName({row, rowIndex}) {
        if (row.status === 1) {
          return 'success-row';
        }
        return '';
      },
      quickAddClick(val){
        // console.log(val);
        this.isadd = true;
        this.dialoginfo = {"name":val.name,"desc":"","open":false,"path":val.path,"type":1,"parent":0};
        this.dialogshow = 1;
      }
    },
    mounted() {
      this.init();
    },
    updated() {
      // console.log(this.dialoginfo);
    }
  }
</script>
<style media="scoped">
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
